﻿<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!--<script type="text/javascript" src="ChartLibrary.js"></script>-->
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript" src="lib/raphael.js"></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/joint.js"></script>
<script type="text/javascript" src="lib/joint.dia.js"></script>
<script type="text/javascript" src="lib/joint.dia.org.js"></script>
<script type="text/javascript" src="lib/joint.arrows.js"></script>
<!--<script type="text/javascript" src="lib/joint.dia.serializer.js"></script>-->
<link type="text/css" href="orglib.css" rel="stylesheet" />	
<script type="text/javascript">
    $(document).ready(function () {
        var originalData = [
    {
        "WorkLevelName": "COO",
        "WorkLevelId": 1,
        "Supervisor": null,
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "",
        "Grade": "Worker",
        "EPFNumber": "203",
        "EmpId": "111",
        "DesignationName": "Operations Manager",
        "CompanyName": "Sabre Technologies Pvt ltd",
        "CallName": "Asitha",
        "Image": "https://c.na12.visual.force.com/servlet/servlet.FileDownload?file=00PU0000001ThwtMAC&amp;a=jpg"
    },
    {
        "WorkLevelName": "Team Lead",
        "WorkLevelId": 2,
        "Supervisor": "111",
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "B",
        "Grade": "Worker",
        "EPFNumber": "20",
        "EmpId": "222",
        "DesignationName": "Team Lead",
        "CompanyName": "Sabre Technologies",
        "CallName": "Sriyangi",
        "Image": "https://c.na12.visual.force.com/servlet/servlet.FileDownload?file=00PU0000001ThwtMAC&amp;a=jpg"
    },
    {
        "WorkLevelName": "Team Lead",
        "WorkLevelId": 2,
        "Supervisor": "111",
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "C",
        "Grade": "Worker",
        "EPFNumber": "202",
        "EmpId": "333",
        "DesignationName": "Team Lead",
        "CompanyName": "Sabre Technologies",
        "CallName": "Anuradha",
        "Image": "http://i.pgcdn.com/images/profile/user_profile_silhouette.gif"
    },
    {
        "WorkLevelName": "SSE",
        "WorkLevelId": 4,
        "Supervisor": "222",
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "D",
        "Grade": "SSE-2",
        "EPFNumber": "1234",
        "EmpId": "444",
        "DesignationName": "Software Engineer",
        "CompanyName": "MAS Holdings",
        "CallName": "D",
        "Image": "http://i.pgcdn.com/images/profile/user_profile_silhouette.gif"
    },
    {
        "WorkLevelName": "Developer",
        "WorkLevelId": 3,
        "Supervisor": "222",
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "E",
        "Grade": "Worker",
        "EPFNumber": "207",
        "EmpId": "555",
        "DesignationName": "Software Engineer",
        "CompanyName": "Sabre Technologies",
        "CallName": "Panthaka",
        "Image": "http://i.pgcdn.com/images/profile/user_profile_silhouette.gif"
    },
    {
        "WorkLevelName": "Dev",
        "WorkLevelId": 3,
        "Supervisor": "333",
        "EmpURL": "https://c.na12.visual.force.com/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "https://c.na12.visual.force.com/a08U0000005URVhIAO",
        "DesignationURL": "https://c.na12.visual.force.com/a0CU0000000Glp3MAC",
        "IndirectReporting": "F",
        "Grade": "S. Dev",
        "EPFNumber": "10200",
        "EmpId": "666",
        "DesignationName": "Software Engineer",
        "CompanyName": "MAS Active Pvt Ltd Leisureline Division",
        "CallName": "Sakitha",
        "Image": "http://i.pgcdn.com/images/profile/user_profile_silhouette.gif"
    }
];

        /*
        ,
        {
        "WorkLevelName": "WL1",
        "WorkLevelId": null,
        "EmpURL": "/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "/a08U0000005URVhIAO",
        "DesignationURL": "/a0CU0000000Glp3MAC",
        "IndirectReporting": "",
        "Grade": "Worker",
        "EPFNumber": "10202",
        "EmpId": "777",
        "DesignationName": "Software Engineer",
        "CompanyName": "MAS Active Pvt Ltd Leisureline Division",
        "CallName": "Chaya"
        },
        {
        "WorkLevelName": "Senior Executive",
        "WorkLevelId": null,
        "EmpURL": "/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "/a08U0000005URVhIAO",
        "DesignationURL": "/a0CU0000000Glp3MAC",
        "IndirectReporting": "",
        "Grade": "Executive",
        "EPFNumber": "3",
        "EmpId": "888",
        "DesignationName": "Software Engineer",
        "CompanyName": "MAS Holdings",
        "CallName": "test"
        },
        {
        "WorkLevelName": "Software Engineer 1",
        "WorkLevelId": 4,
        "EmpURL": "/apex/EmployeeNew?id=a0bU00000001FBoIAM",
        "CompanyURL": "/a08U0000005URVhIAO",
        "DesignationURL": "/a0CU0000000Glp3MAC",
        "IndirectReporting": "",
        "Grade": "Executive",
        "EPFNumber": "1122",
        "EmpId": "999",
        "DesignationName": "Software Engineer",
        "CompanyName": "Sabre Technologies Pvt ltd",
        "CallName": "TestTrading"
        }
        */

    var compactView = false,
        maxBoxWidth = 270,
        maxBoxHeight = 130,
        minHorizontalSpace = 50, 
        verticalSpace = 50;
        ChartLibrary.generateTree(originalData, compactView, maxBoxWidth, maxBoxHeight, minHorizontalSpace, verticalSpace);
        ChartLibrary.initCanvas("hello_world", instance.canvasWidth, instance.canvasHeight);
        ChartLibrary.drawTree();


        //var jsonString = JSON.stringify(testData);


        //$("#testArea").unbind('click').click(function () {
        //        
        //});
    });
</script>
</head>
<body>
 
<div id="hello_world"style="width:1500px;height:1000px;overflow-y:auto;overflow-x:auto;">
<script type="text/javascript" src="ChartLibrary.js"></script>


</div>
<!--<div id="testArea" style="height:100px;background-color:red;">Click Here</div>-->
</body>
</html>